import React, { RefObject } from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import { rsaEncrypt } from "../../hooks/Jsencrypt";
import { LockOutline, FillinOutline, MailOutline } from "antd-mobile-icons"
import request from "../../api/request";
import Navbar from "../../compounts/navber/Navbar";
import style from './register.module.css'

function Index() {
    const [form] = Form.useForm();
    // 获取验证码
    const getCode = () => {
        const email = form.getFieldValue("email");
        if (!email) {
            Toast.show({
                content: "请输入邮箱",
                duration: 2000,
            });
            return;
        }
        const params = new URLSearchParams();
        params.append("email", email);

        request.post("/health/user/v1/sendOutEmailCode", params, {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            })
            .then((res) => {
                console.log(res);
                if (res.data.status === "success") {
                    Toast.show({
                        content: "验证码发送成功",
                        duration: 2000,
                    });
                } else {
                    Toast.show({
                        content: `发送失败: ${res.data.message}`,
                        duration: 2000,
                    });
                }
            })
            .catch((error) => {
                console.error("发送验证码失败:", error);
                Toast.show({
                    content: "发送验证码失败，请稍后重试",
                    duration: 2000,
                });
            });
    };
    // 注册表单
    const onFinish = async (values) => {
        console.log(values);
        const pwd1 = rsaEncrypt(values.pwd1);
        try {
            const params = new URLSearchParams();
            params.append("email", values.email);
            params.append("code", values.code);
            params.append("pwd1", pwd1);
            params.append("pwd2", pwd1);
            // 如果有邀请码也需要添加
            if (values.invitationCode) {
                params.append("invitationCode", values.invitationCode);
            }

            const response = await request.post("/health/user/v1/register", params, {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            });
            console.log(response);
            if (response.data.status === "success") {
                Toast.show({
                    content: "注册成功",
                    duration: 2000,
                });
            } else {
                Toast.show({
                    content: `注册失败: ${response.data.message}`,
                    duration: 2000,
                });
            }
        } catch (e) {
            console.error("注册失败:", e);
            Toast.show({
                content: "注册失败，请稍后重试",
                duration: 2000,
            });
        }
    };
    return (
        <div className={style.box}>
            <Navbar title={'注册'}></Navbar>
            <Form
                form={form}
                layout="horizontal"
                onFinish={onFinish}
                requiredMarkStyle='none'
                footer={
                    <Button block type="submit" color="primary" size="large">
                        提交
                    </Button>
                }
            >
                {/* 账号 */}
                <Form.Item
                    name="email"
                    label={<MailOutline />}
                    rules={[{ required: true, message: "邮箱不能为空" }]}
                    style={{ '--prefix-width': '60px', textAlign: 'center', fontSize: '20px' }}
                >
                    <Input placeholder="请输入邮箱" />
                </Form.Item>
                {/* 邮箱验证码 */}
                <Form.Item
                    name="code"
                    label={<FillinOutline />}
                    extra={<a onClick={getCode}>发送验证码</a>}
                    style={{ '--prefix-width': '60px', textAlign: 'center', fontSize: '20px' }}
                >
                    <Input placeholder="请输入验证码" />
                </Form.Item>
                <Form.Item
                    name="pwd1"
                    label={<LockOutline />}
                    rules={[{ required: true, message: "密码不能为空" }]}
                    style={{ '--prefix-width': '60px', textAlign: 'center', fontSize: '20px' }}
                >
                    <Input placeholder="请输入密码" />
                </Form.Item>
                <Form.Item
                    name="pwd2"
                    label={<LockOutline />}
                    rules={[{ required: true, message: "密码不能为空" }]}
                    style={{ '--prefix-width': '60px', textAlign: 'center', fontSize: '20px' }}
                >
                    <Input placeholder="确认密码" />
                </Form.Item>
            </Form>
        </div>
    );
}

export default Index;
